<template>
  <section v-loading="loading">
    <!--工具栏-->
    <el-col :span="24" class="toolbar" style="padding-bottom:0px;">
      <el-form :model="condition" :inline="true">
        <el-form-item>
          <el-date-picker
            v-model="condition.time"
            type="datarange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholde="开始日期"
            end-placeholde="结束日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select v-model="condition.type" placeholder="类型" @change="resetPage">
            <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="condition.jobNumber" placeholder="工号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:@click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!-- 操作栏位 -->
    <el-col>
      <el-form :inline="true">
        <el-form-item>
          <el-button type="success" @click="newFormVisible = true" size="small">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--数据展示区域-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column align="center" type="selection" fixed width="50"></el-table-column>
      <el-table-column align="center" label="序号" fixed type="index" width="50"></el-table-column>
      <el-table-column align="center" label="姓名" prop="name" fixed min-width="100"></el-table-column>
      <el-table-column align="center" label="工号" prop="jobNumber" min-width="100"></el-table-column>
      <el-table-column align="center" label="部门" prop="department" min-width="100"></el-table-column>
      <el-table-column align="center" label="开始时间" prop="beginTime" min-width="100"></el-table-column>
      <el-table-column align="center" label="结束时间" prop="endTime" min-width="100"></el-table-column>
      <el-table-column align="center" label="总天数" prop="total" min-width="50"></el-table-column>
      <el-table-column align="center" label="申请原因" prop="reason" min-width="150"></el-table-column>
      <el-table-column align="center" label="备注" prop="remark" min-width="150"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="currentChange"
        :current-page="currentPage"
        :total="totalPage"
        style="float:right;"
      ></el-pagination>
    </el-col>

    <!--新建-->
    <el-dialog title="新增" :visible="newFormVisible" :close-on-click-modal="false">
      <el-form label-width="6rem" ref="newForm" :model="newData" :rules="rules">
        <el-form-item label="类型" prop="type">
          <el-select v-model="newData.type" placeholder="类型">
            <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="newData.name" placeholder="姓名" @blur="nameBlur(newData.name)"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" prop="sfz">
          <el-select
            v-model="newData.sfz"
            placeholder="请选择"
            :disabled="sfzDisabled"
            @change="sfzChange(newData.sfz)"
          >
            <el-option
              v-for="item in sfz"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工号" prop="jobNumber">
          <el-input v-model="newData.jobNumber" @blur="getPerson" disabled></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="newData.department" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="申请日期" prop="time">
          <el-date-picker
            v-model="newData.time"
            type="datarange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholde="开始日期"
            end-placeholde="结束日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="申请原因">
          <el-input v-model="newData.reason" type="textarea" autosize placeholder="请输入申请原因"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="newData.remarks" type="textarea" autosize placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="newFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="newSubmit" :loading="newLoading">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template> 
<script>
export default {
  data() {
    return {
      condition: {
        time: [],
        name: null,
        jobNumber: null,
        type: "",
        page: 1,
        _time: []
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      tableData: [
        {
          name: null,
          jobNumber: null,
          department: null,
          beginTime: null,
          endTime: null,
          total: null,
          reason: null,
          remark: null
        }
      ],
      newData: {
        type: null,
        jobNumber: "",
        name: "",
        _name: "",
        department: "",
        time: [],
        reason: null,
        remark: null,
        _time: [],
        sfz: null
      },
      type: [
        {
          label: "免扣",
          value: "1"
        },
        {
          label: "销假",
          value: "2"
        }
      ],
      rules: {
        type: [
          { required: true, message: "请选择新增类型", trigger: "changhe" }
        ],
        jobNumber: [
          {
            type: "string",
            required: true,
            message: "请输入工号",
            trigger: "blur"
          }
        ],
        name: [
          {
            type: "string",
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          }
        ],
        sfz: [
          {
            type: "string",
            required: true,
            message: "请选择身份证",
            trigger: "blur"
          }
        ],
        time: {
          type: "array",
          required: true,
          message: "请选择日期范围",
          trigger: "change"
        }
      },
      loading: false,
      currentPage: 1,
      totalPage: 1,
      newFormVisible: false,
      name: null,
      newLoading: false,
      Loading: false,
      sfzDisabled: true,
      sfz: [],
      searchResult: null
    };
  },
  methods: {
    resetPage() {},
    search() {},
    getPerson() {},
    // 分页
    currentChange(val) {
      this.condition.page = val === undefined ? this.currentPage : val;
      this.getData();
    }
  }
};
</script>